<template>
	<view class="coupon-box">
		<view class="coupon-nav">
			<view class="">优惠券</view>
			<view class="exchange" @click="jumpPage">领取优惠券</view>
		</view>
		<u-sticky bgColor="#fff"><u-tabs :list="navList" lineColor="#ec4575" @click="clickNav"></u-tabs></u-sticky>

		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="coupon-content" v-for="item in dataList" :key="item.id">
				<view class="circle-box"></view>
				<view class="coupon-content__left" :class="{ 'change-exchange-btn': !item.expirationStatus }">
					<view class="coupon-content__left_price">￥{{ item.couponInfo.couponMoney || 0 }}</view>
					<view class="coupon-content__left_title u-line-2">{{ item.couponInfo.couponRemark }}</view>
				</view>
				<view class="coupon-content__right">
					<view class="coupon-content__right_content">
						<view class="content_title u-line-3">{{ item.couponInfo.couponName }}</view>
						<view style="width: 416rpx;">过期时间:{{ item.expirationTime }}</view>
						<view style="width: 416rpx;" v-if="useStatus === 1">使用时间:{{ item.useTime }}</view>
					</view>
					<view class="exchange-btn" @click="openExchangeModal(item)" v-if="useStatus === 2" :class="{ 'change-exchange-btn': !item.expirationStatus }">
						{{ item.expirationStatus ? '已过期' : '兑换' }}
					</view>
				</view>
				<view class="delete-btn" @click.stop="isDeleteShow(item)"><u-icon name="close" size="12" color="#fff"></u-icon></view>
			</view>
		</mescroll-body>
		<!-- 删除优惠券的弹窗 -->
		<u-modal
			:show="deleteShow"
			@confirm="deleteCoupon()"
			@close="isDeleteShow()"
			@cancel="isDeleteShow()"
			showCancelButton
			title="温馨提示"
			content="你确定要删除该优惠券吗？"
			closeOnClickOverlay
		></u-modal>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			deleteShow: false,
			navList: [
				{
					name: '未使用',
					id: 2
				},
				{
					name: '已使用',
					id: 1
				}
			],
			// 分页配置
			upOption: {
				textNoMore: '没有更多了',
				noMoreSize: 1,
				empty: {
					icon: require('@/static/image/empty/icon-baobiao.png'),
					tip: '暂无优惠券信息',
					fixed: true,
					top: '300rpx'
				},
				toTop: {
					safearea: true
				}
			},
			useStatus: 2, // 使用的状态 1 已使用 2 未使用
			dataList: [], // 优惠券的列表
			searchInfo: {},
			changeInfo: {} // 选择的信息
		};
	},
	onShow() {
		// this.getList();
		this.mescroll.resetUpScroll();
	},
	methods: {
		// 打开或者关闭删除弹窗
		isDeleteShow(item) {
			if (item) this.changeInfo = item;
			this.deleteShow = !this.deleteShow;
		},
		// 删除优惠券
		async deleteCoupon() {
			const res = await this.$api.coupon.deleteCoupon({id:this.changeInfo.id})
			setTimeout(() => {
				this.mescroll.resetUpScroll();
			}, 500);
			this.isDeleteShow()
			uni.showToast({
				icon: 'none',
				title: `删除成功`
			});
		},
		// 切换导航
		clickNav(info) {
			this.useStatus = info.id;
			this.mescroll.resetUpScroll();
		},
		// 打开兑换框的弹框
		openExchangeModal(info) {
			const { expirationStatus, couponInfo, id } = info;
			if (expirationStatus)
				return uni.showToast({
					icon: 'none',
					title: `${couponInfo.couponName}已过期`
				});
			uni.showModal({
				title: '温馨提示',
				content: `你确定要兑换${couponInfo.couponName}吗?`,
				success: res => {
					if (res.confirm) {
						this.exchangeCoupon(id);
					}
				}
			});
		},
		// 兑换优惠券
		async exchangeCoupon(id) {
			const res = await this.$api.coupon.exchangeCoupon({ id });
			if (res.code == 200) {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 500);
				uni.showToast({
					icon: 'none',
					title: `兑换成功`
				});
			}
		},
		// 跳转到领取优惠券页面
		jumpPage() {
			uni.navigateTo({
				url: '/packMyself/coupon/receiveCoupon'
			});
		},
		// 获取优惠券列表
		async upCallback(page) {
			this.searchInfo.page = page.num; // 页码, 默认从1开始
			this.searchInfo.limit = page.size; // 页长, 默认每页10条
			this.searchInfo.useStatus = this.useStatus; // 使用状态
			const res = await this.$api.coupon.couponList(this.searchInfo);
			if (res.data.list) {
				res.data.list.map(item => {
					const newTime = parseInt(new Date() / 1000); // 当前时间
					const expirationTime = parseInt(new Date(item.expirationTime) / 1000); // 过期时间
					item.expirationStatus = newTime > expirationTime ? true : false; // 当前时间大于过期时间说明该优惠券已过期 为ture
				});
			}
			const curPageData = res.data.list ? res.data.list : [];
			let curPageLen = curPageData.length;

			//设置列表数据
			if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			this.dataList.push(...curPageData); //追加新数据

			// 给导航徽标
			this.navList[1].badge = {
				value: this.useStatus === 1 ? res.data.countNum : 0
			};
			this.navList[0].badge = {
				value: this.useStatus === 1 ? 0 : res.data.countNum
			};

			//后台接口有返回列表的总页数 totalPage
			this.mescroll.endBySize(curPageLen, res.data.countNum);
		}
	}
};
</script>

<style lang="scss" scoped>
$EnableColor: #ec4575;
$DisableColor: #ccc;
.coupon-box {
	.coupon-nav {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 60rpx 30rpx 10rpx;
		font-size: 38rpx;
		font-weight: bold;

		.exchange {
			font-size: 24rpx;
			color: #666;
			padding: 4px 11px;
			border-radius: 25px;
			color: #fff;
			background: #ff8100;
		}
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		background: #ccc;
		padding: 9rpx 10rpx;
		border-bottom-left-radius: 36rpx;
	}
	.tab-box {
		background: #fff;
	}

	.coupon-content {
		margin: 30rpx;
		border-radius: 5px;
		background: #fff;
		display: flex;
		font-size: 24rpx;
		height: 180rpx;
		position: relative;
		.circle-box {
			position: absolute;
			display: block;
			top: 12rpx;
			left: 12rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #fff;
			content: '';
			z-index: 9;
		}
		&__left:before,
		&__left:after {
			position: absolute;
			display: block;
			right: -15rpx;
			width: 25rpx;
			height: 25rpx;
			border-radius: 50%;
			background: #f4f4f4;
			content: '';
			z-index: 9;
		}
		&__left:before {
			top: -15rpx;
		}
		&__left:after {
			bottom: -15rpx;
		}
		&__left {
			text-align: center;
			width: 230rpx;
			position: relative;
			background: $DisableColor;
			padding: 10rpx;
			color: #fff;
			line-height: 50rpx;

			&_price {
				margin-top: 20rpx;
				font-size: 48rpx;
			}
			&_title {
				color: #eee;
				margin-top: 20rpx;
				line-height: 35rpx;
			}
		}

		&__right {
			padding: 20rpx;
			display: flex;
			background: #fff;
			&_content {
				width: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.content_title {
					height: 100rpx;
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}
			}
			.exchange-btn {
				font-size: 26rpx;
				text-align: center;
				margin-top: 45rpx;
				border-radius: 50rpx;
				color: #fff;
				// display: inline-block;
				width: 120rpx;
				height: 42rpx;
				line-height: 42rpx;
				background: $DisableColor;
			}
		}
	}
	.change-exchange-btn {
		background: $EnableColor !important;
	}
}
</style>
